<template>
  <div class="my-resume-detail-box">
    <div class="resume-page">
      <van-form validate-first label-width="auto" :show-error-message="false" validate-trigger="onSubmit" :readonly="!editable" @submit="sureHandle" @failed="formValidate">
        <div v-if="resumeType >= 0" class="info-container">
          <div class="resume-title">基本信息</div>
          <!-- <span class="download-btn" @click="editable = false">下载简历</span> -->
          <span v-if="!editable" class="download-btn" @click="downResume">下载简历</span>
          <span v-if="!editable" class="edit-btn" @click="editable = true">编辑</span>
          <van-uploader style="border-color:#fff;" :class="['avatar-box', {'avatar-box-edit': editable}]" :readonly="!editable" :after-read="afterUploadAvatar">
            <img :src="personInfo.portrait ? personInfo.portrait : require('../../../../assets/defaultAvatar.jpg')" alt="">
          </van-uploader>
          <div class="field-box">
            <van-field v-model.trim="personInfo.name" label="姓名：" maxlength="32" :rules="[{ required: true, message: '请输入姓名' }]" :placeholder="editable ? '请输入姓名' : ''" />
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.sexDes" label="性别：" :rules="[{ required: true, message: '请选择性别' }]" readonly :placeholder="editable ? '请选择性别' : ''" @click="onShowPicker('sex')" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.mobile" label="手机号：" type="tel" maxlength="11" :rules="[{ required: true, message: '请输入手机号' }, { pattern: /^1\d{10}$/, message: '手机号码有误' }]" :placeholder="editable ? '请输入手机号' : ''" />
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.educationName" label="学历选择：" :rules="[]" readonly :placeholder="editable ? '请选择学历' : ''" @click="onShowPicker('education')" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.personalStateName" label="当前状态：" :rules="[]" readonly :placeholder="editable ? '请选择当前状态' : ''" @click="onShowPicker('personalState')" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.nowAddress" label="现居地：" :rules="[]" readonly :placeholder="editable ? '请选择现居地' : ''" @click="onShowArea(1)" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
        </div>
        <div v-if="resumeType >= 0" class="info-container">
          <div class="resume-title">求职信息</div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.expectJobTypeName" label="期望职位类型：" :rules="[]" readonly :placeholder="editable ? '请选择期望职位类型' : ''" @click="onShowPicker('jobIntention')" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.expectJobSalaryName" label="期望工作薪酬：" :rules="[]" readonly :placeholder="editable ? '请选择期望工作薪酬' : ''" @click="onShowPicker('expectJobSalary')" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.expectAddress" label="期望工作地：" :rules="[]" readonly :placeholder="editable ? '请选择期望工作地' : ''" @click="onShowArea(2)" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.jobNatureName" label="工作性质：" :rules="[]" readonly :placeholder="editable ? '请选择工作性质' : ''" @click="onShowPicker('jobNature')" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.workYearName" label="工作年限：" :rules="[]" readonly :placeholder="editable ? '请选择工作年限' : ''" @click="onShowPicker('experience')" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
          <div class="field-box">
            <van-field v-model.trim="personInfo.publicCollegeGraduatesIdentityName" :rules="[]" label="是否公开简历：" readonly :placeholder="editable ? '请选择是否公开简历' : ''" @click="onShowPicker('publicCollegeGraduatesIdentity')" />
            <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
          </div>
        </div>
        <div v-if="resumeType >= 0" class="info-container">
          <div class="resume-title">工作经历</div>
          <div v-for="(item, index) in infoResumeWorkExperience" :key="index" class="show-exporience-box">
            <div class="field-box">
              <van-field v-model.trim="item.startTime" label="开始时间：" :rules="[]" readonly :placeholder="editable ? '请选择开始时间' : ''" @click="newOnShowDatePicker('startTime', 'workExperience', index)" />
              <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
            </div>
            <div class="field-box">
              <van-field v-model.trim="item.endTime" label="结束时间：" :rules="[]" readonly :placeholder="editable ? '请选择结束时间' : ''" @click="newOnShowDatePicker('endTime', 'workExperience', index)" />
              <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
            </div>
            <div class="field-box">
              <van-field v-model.trim="item.entName" label="公司名称：" :rules="[]" maxlength="32" :placeholder="editable ? '请输入公司名称' : ''" />
            </div>
            <div class="field-box">
              <van-field v-model.trim="item.positionName" label="职位名称：" :rules="[]" maxlength="32" :placeholder="editable ? '请输入职位名称' : ''" />
            </div>
            <div class="field-box textarea-box">
              <van-field
                v-model="item.description"
                :placeholder="editable ? '请输入工作描述' : ''"
                label="工作描述："
                type="textarea"
                :rules="[]"
                rows="5"
                maxlength="500"
              />
            </div>
            <div v-if="editable" class="delete-box">
              <span @click="deleteResume(item, 'workExperience', index)">删除</span>
            </div>
            <div class="split-line" />
          </div>
          <div class="btn-box">
            <van-button :disabled="!editable" type="primary" native-type="button" style="width: 100%; background-color:#16b887;" @click="newWorkExperience">
              添加工作经历
            </van-button>
          </div>
        </div>
        <div v-if="resumeType >= 2" class="info-container">
          <div class="resume-title">教育经历</div>
          <div v-for="(item, index) in infoResumeEducation" :key="index" class="show-exporience-box">
            <div class="field-box">
              <van-field v-model.trim="item.startTime" label="开始时间：" :rules="[]" readonly :placeholder="editable ? '请选择开始时间' : ''" @click="newOnShowDatePicker('startTime', 'education', index)" />
              <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
            </div>
            <div class="field-box">
              <van-field v-model.trim="item.endTime" label="结束时间：" :rules="[]" readonly :placeholder="editable ? '请选择结束时间' : ''" @click="newOnShowDatePicker('endTime', 'education', index)" />
              <img v-if="editable" src="../../../../assets/ic_right_arrow.png" class="field-box-icon" alt="">
            </div>
            <div class="field-box">
              <van-field v-model.trim="item.school" label="学校名称：" :rules="[]" maxlength="32" :placeholder="editable ? '请输入学校' : ''" />
            </div>
            <div class="field-box">
              <van-field v-model.trim="item.major" label="专业名称：" :rules="[]" maxlength="32" :placeholder="editable ? '请输入专业' : ''" />
            </div>
            <div v-if="editable" class="delete-box">
              <span @click="deleteResume(item, 'education', index)">删除</span>
            </div>
            <div class="split-line" />
          </div>
          <div class="btn-box">
            <van-button :disabled="!editable" type="primary" native-type="button" style="width: 100%; background-color:#16b887;" @click="newEducation">
              添加教育经历
            </van-button>
          </div>
        </div>
        <!-- extra info -->
        <div class="extra-info">
          <div v-if="resumeType>=1" class="info-container">
            <div class="resume-title">资格证书</div>
            <div class="upload-box">
              <div v-for="(item, index) in personInfo.certificateList" :key="index" class="upload-box-item" @click.stop.prevent="previewEvent(index)">
                <img :src="item" alt="">
                <div v-if="editable" class="del van-icon van-icon-cross" @click.stop="deleteCertificates(index)" />
              </div>
              <van-uploader
                v-if="editable"
                v-model="certificateList"
                class="upload-box-input"
                :style="certificateList.length===2?'background-color:#fff':''"
                :after-read="afterUploadCertificates"
                :preview-image="false"
                :max-count="2"
              >
                <span class="icon van-icon van-icon-photograph" />
              </van-uploader>
            </div>
          </div>
          <div v-if="resumeType >= 2" class="info-container">
            <div class="resume-title">自我评价</div>
            <div class="field-box textarea-box">
              <van-field
                v-model.trim="personInfo.selfEvaluation"
                :placeholder="editable ? '请输入自我评价' : ''"
                type="textarea"
                rows="5"
                maxlength="500"
                :rules="[]"
              />
            </div>
          </div>
          <van-popup v-model="showPicker" round position="bottom">
            <van-picker
              ref="picker"
              show-toolbar
              :columns="pickerList"
              :default-index="pickerIndex"
              value-key="msg"
              @confirm="onConfirmPicker"
              @cancel="onCancel"
            />
          </van-popup>
          <van-popup v-model="showArea" round position="bottom">
            <van-cascader
              v-model="areaValue"
              :title="areaTitle"
              :options="areaList"
              active-color="#16b887"
              @close="showArea = false"
              @change="onChangeArea"
              @finish="onFinishArea"
              @cancel="onCancelArea"
            />
          </van-popup>
          <van-popup v-model="showDatePicker" round position="bottom">
            <van-datetime-picker
              v-model="selectDate"
              type="year-month"
              :min-date="minDate"
              :max-date="maxDate"
              :formatter="formatter"
              @confirm="newConfirmDatePicker"
              @cancel="onCancel"
            />
          </van-popup>
          <button v-if="editable" native-type="submit" type="default" class="btn-save">
            保存简历
          </button>
        </div>
      </van-form>
      <!-- <TabBar :msg-num="msgNum" /> -->
    </div>
  </div>
</template>

<script>
export default {
  filters: {
    dateFormatter (date) {
      if (!date) {
        return '请选择时间'
      }
      var year = date.getFullYear()
      var month = (date.getMonth() + 1).toString()
      if (month.length === 1) {
        month = '0' + month
      }
      var dateTime = year + '-' + month
      return dateTime
    }
  },
  data () {
    return {
      editable: false, // 是否可编辑
      // 选择弹窗
      showPicker: false,
      myUserId: '',
      pickerList: [],
      pickerIndex: 0,
      infoResumeEducation: [], // 教育经历列表
      infoResumeWorkExperience: [], // 工作经历列表
      briefData: [],
      briefTimeType: '',
      briefType: '',
      briefIndex: '',
      sexList: [
        {
          msg: '男',
          code: 1,
          type: 'sex'
        },
        {
          msg: '女',
          code: 0,
          type: 'sex'
        }
      ], // 性别
      educationList: [], // 学历
      stateList: [], // 状态
      jobIntentionList: [], // 职位类型
      salaryList: [
        {
          category: '2.1-3',
          code: 1,
          msg: '2100-3000',
          type: 'expectJobSalary'
        },
        {
          category: '3-5',
          code: 2,
          msg: '3000-5000',
          type: 'expectJobSalary'
        },
        {
          category: '5-8',
          code: 3,
          msg: '5000-8000',
          type: 'expectJobSalary'
        },
        {
          category: '8-10',
          code: 4,
          msg: '8000-10000',
          type: 'expectJobSalary'
        },
        {
          category: '10-15',
          code: 5,
          msg: '10000-15000',
          type: 'expectJobSalary'
        },
        {
          category: '15-20',
          code: 6,
          msg: '15000-20000',
          type: 'expectJobSalary'
        },
        {
          category: '20-100',
          code: 7,
          msg: '20000以上',
          type: 'expectJobSalary'
        }
      ], // 薪酬
      jobNatureList: [], // 工作性质
      experience: [], // 工作年限
      publicCollegeGraduatesIdentityList: [
        {
          code: 0,
          msg: '不公开',
          type: 'publicCollegeGraduatesIdentity'
        },
        {
          code: 1,
          msg: '公开',
          type: 'publicCollegeGraduatesIdentity'
        }
      ], // 是否公开简历
      // 区域选择
      showArea: false,
      areaTitle: '选择现居地',
      areaValue: '',
      areaType: 1, // 1 现居地 2 工作地
      areaList: [],
      areaSelectData: {},
      areaOptions: [], // 现居地
      streetSelectData: {},
      streetOptions: [], // 期望工作地
      // 时间选择
      showDatePicker: false,
      dateType: '',
      minDate: new Date(1949, 0, 1),
      maxDate: new Date(),
      selectDate: new Date(),

      personInfo: {
        id: '',
        idCard: '',
        name: '',
        mobile: '',
        portrait: '', // 头像
        sexDes: '', // 性别name
        sex: '', // 性别code
        educationName: '', // 学历name
        education: '', // 学历code
        personalState: '', // 当前状态
        personalStateName: '',
        pdf: '', // 个人简历

        // 现居地
        nowAddress: '',
        nowArea: '',
        nowAreaCode: null,
        nowCity: '',
        nowCityCode: null,
        nowProvince: '',
        nowProvinceCode: null,

        // 期望工作地
        expectAddress: '',
        expectJobArea: '',
        expectJobAreaCode: '',
        expectJobCity: '',
        expectJobCityCode: '',
        expectJobProvince: '',
        expectJobProvinceCode: '',
        // expectJobArea: '龙岗区',
        // expectJobAreaCode: 440307,
        // expectJobCity: '深圳市',
        // expectJobCityCode: 440300,
        // expectJobProvince: '广东省',
        // expectJobProvinceCode: 440000,
        expectJobStreet: '',
        expectJobStreetCode: '',
        expectJobCommunity: '',
        expectJobCommunityCode: '',

        // 求职信息
        expectJobType: '', // 期望职位类型
        expectJobTypeName: '',
        expectJobSalary: '', // 期望薪酬
        expectJobSalaryName: '',
        jobNature: '', // 工作性质
        jobNatureName: '',
        workYear: '',
        workYearName: '',
        publicCollegeGraduatesIdentity: 0, // 是否公开简历
        publicCollegeGraduatesIdentityName: '',
        // 工作经历
        workBeginTime: '', // 工作开始时间
        workEndTime: '', // 工作结束时间
        workCompany: '', // 公司名称
        workDesc: '', // 工作描述
        workPosition: '', // 职位
        // 教育经历
        educationalBeginTime: '',
        educationalEndTime: '',
        educationalIndustry: '',
        educationalSchool: '',
        // 自我评价
        selfEvaluation: '',
        // 资格证书
        certificateList: []
      },
      certificateList: [], // 资格证书
      msgNum: null
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  padding: 12px 12px 0 12px;
}

.split-line {
  height: 1px;
  width: 98%;
  margin: 10px 0;
  background-color: #f0f0f0;
}

.delete-box {
  line-height: 30px;
  text-align: right;
  padding-right: 15px;
  color: red;
}

.show-exporience-box {
  .info-item-box {
    display: flex;
    height: 34px;
    line-height: 34px;

    .info-left {
      flex: 30%;
      padding-left: 12px;
      text-align: left;
      color: #898c91;
    }

    .info-right {
      flex: 60%;
      padding-right: 20px;
      text-align: right;
    }
  }

  .info-description-item-box {
    .description-label {
      color: #898c91;
    }

    .work-description-box {
      margin: 12px;
      border: 1px solid #e4e4e5;
      border-radius: 6px;
      min-height: 45px;

      .work-description {
        padding: 12px;
      }
    }
  }
}

.my-resume-detail-box {
  & /deep/ .van-nav-bar__text {
    color: #1dba8c;
  }

  & /deep/ .van-nav-bar .van-icon {
    color: #000;
  }
}

.resume-page {
  padding: 12px 12px calc(62px + env(safe-area-inset-bottom));
  background-color: #f4f4f4;
}

.info-container {
  position: relative;
  margin-bottom: 12px;
  padding: 12px 0;
  background-color: #fff;
  border-radius: 6px;
}

.resume-title {
  position: relative;
  padding: 0 15px;
  line-height: 1.4;
  font-size: 18px;
  color: #333;

  &:before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -8.5px;
    background-color: #16b887;
    width: 4px;
    height: 15px;
    border-radius: 4px;
  }
}

.edit-btn {
  position: absolute;
  display: inline-block;
  top: 12px;
  right: 15px;
  line-height: 26px;
  font-size: 16px;
  color: #16b887;
  // border: 1px #16b887 solid;
  z-index: 6;
}

.download-btn {
  position: absolute;
  display: inline-block;
  top: 12px;
  right: 55px;
  line-height: 26px;
  font-size: 16px;
  color: #16b887;
  // border: 1px #16b887 solid;
  z-index: 6;
}

.avatar-box {
  position: relative;
  display: block;
  margin: 20px auto;
  width: 100px;
  height: 100px;

  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
  }

  /deep/ .van-uploader__wrapper,
  /deep/ .van-uploader__input-wrapper {
    width: 100%;
    height: 100%;
  }

  &-edit {
    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 32px;
      height: 32px;
      background: url(../../../../assets/ic_camera.png) center center / 100% 100% no-repeat;
    }
  }

}

/deep/ .van-picker__confirm {
  color: #16b887;
}

.field-box {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px 0 10px;

  .van-field::after {
    display: none;
  }

  .van-field {
    padding: 0;
    line-height: 36px;
    font-size: 14px;

    /deep/ .van-field__label {
      color: #888;
    }

    /deep/ .van-cell__value {
      color: #171717;
    }
  }

  /deep/ .van-field--disabled {
    .van-field__label {
      color: #888;
    }
  }

  /deep/ .van-field__control {
    text-align: right;

    &:disabled {
      color: #323233;
      -webkit-text-fill-color: #323233;
    }
  }

  &-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 5px;
    z-index: 2;
  }
}

/deep/ ::-webkit-input-placeholder {
  /* Edge */
  color: #ccc;
}

/deep/ :-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #ccc;
}

/deep/ ::placeholder {
  color: #ccc;
}

.textarea-box {
  display: block;
  padding-right: 15px;

  .van-field {
    display: block;
  }

  /deep/ .van-field__value {
    margin-top: 10px;
    border-radius: 6px;
    line-height: 24px;
    background-color: #f4f4f4;
    padding: 6px 10px;
  }

  /deep/ .van-field__label+.van-field__value {
    margin-top: 0;
  }

  /deep/ .van-field__control {
    text-align: left;
  }
}

.btn-save {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  color: #fff;
  background-color: #16b887;
  border: none;
  border-radius: 6px;
  transition: all .3s;

  &:hover {
    opacity: .8;
  }
}

.upload-box {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 5px 0 15px;

  &-item {
    position: relative;
    margin: 0 12px 12px 0;
    width: calc((100% / 4) - 12px);
    height: 0;
    padding-bottom: calc((100% / 4) - 12px);
    background-color: #f7f8fa;
    overflow: hidden;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .del {
      position: absolute;
      top: 0;
      right: 0;
      width: 13px;
      height: 15px;
      padding-left: 2px;
      text-align: center;
      line-height: 13px;
      color: #fff;
      font-size: 9px;
      background-color: rgba(0, 0, 0, .7);
      border-radius: 0 0 0 15px;
    }
  }

  &-input {
    position: relative;
    height: 0;
    margin: 0 12px 12px 0;
    width: calc((100% / 4) - 12px);
    padding-bottom: calc((100% / 4) - 12px);
    background-color: #f7f8fa;
    overflow: hidden;

    /deep/ .van-uploader__wrapper {
      position: absolute;
      top: 0;
      left: 0;
    }

    /deep/ .van-uploader__wrapper,
    /deep/ .van-uploader__input-wrapper {
      width: 100%;
      height: 100%;
    }

    .icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      color: #999;
    }

    /deep/ .van-uploader__input {
      z-index: 6;
    }
  }
}

.item-input {
  color: #666;
  height: 20px;
  font-size: 15px;
}

input:disabled {
  background-color: #fff;

}
</style>
